<template>
  <!-- 质量管理 -->
  <div class="body qualityManage">
    <div class="titleBox">
      <img src="../../assets/qualityManage.png" alt="" class="titlebg" />
      <p class="title">质量管理</p>
    </div>
    <div class="main" @click="$emit('qualityFun', true)">
      <div id="myChartPie" class="myChart"></div>
      <div id="myChartBar" class="myChart"></div>
    </div>
  </div>
</template>

<script>
import api from "@/util/api";
export default {
  name: "qualityManage",
  data() {
    return {
      msg: "qualityManage",
      pieData: [],
      pielegend: [],
      pieOptions: {
        title: {
          text: "本月不合格项统计",
          left: "center",
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: [],
          top: "10%",
          itemGap: 1.5,
          itemWidth: 6,
          itemHeight: 6,
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            type: "pie",
            radius: [10, 40],
            top: "50%",
            left: "-48%",
            height: "33%",
            width: 250,
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            label: {
              color: "rgba(255, 255, 255, 1)",
              formatter: "{c}",
              edgeDistance: 10,
              rich: {
                time: {
                  fontSize: 10,
                  color: "#999",
                },
              },
            },
            labelLine: {
              length: 10,
              length2: 0,
            },
            data: [],
          },
        ],
      },
      barOptions: {
        color: ["#4E7EDD", "#C55A45"],
        title: {
          text: "本月质量验收",
          left: "center",
          textStyle: {
            fontSize: 12,
            color: "rgba(255, 255, 255, 1)",
          },
        },
        grid: {
          left: "0%",
          top: "46%",
          height: "100",
          containLabel: true,
        },
        legend: {
          top: "20%",
          itemWidth: 6,
          itemHeight: 6,
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          data: ["单位工程", "检验批工程", "分部工程", "分项工程"],
          axisLabel: {
            fontSize: 8,
            color: "rgba(255, 255, 255, 1)",
          },
        },
        yAxis: {
          type: "value",
          minInterval: 1,
          axisLabel: {
            fontSize: 12,
            color: "rgba(255, 255, 255, 1)",
          },
        },
        dataset: {
          source: [],
        },
        series: [
          {type: "bar"},
          {type: "bar"},
        ],
      },
    };
  },
  mounted() {
    this.qualityIndexShow();
  },
  methods: {
    drawPie() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChartPie"));
      // 绘制图表
      // this.pieOptions.series[0].data = this.pieData;

      myChart.setOption(this.pieOptions);
    },
    drawBar() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChartBar"));
      // 绘制图表
      //
      myChart.setOption(this.barOptions);
    },

    /** API */
    // 大屏展示数据:展示质量验收数量及不合格项占比情况
    qualityIndexShow() {
      let data1 = [];
      api.qualityIndexShow({}, (res) => {
        res.data.data.unqualified.map((item) => {
          this.pieData.push({
            name: item.name.replace(/不合格项/, ""),
            value: +item.value,
          });
          this.pielegend.push(item.name.replace(/不合格项/, ""));
        });
        this.pielegend.sort(function (a, b) {
          var nameA = a.toUpperCase(); // ignore upper and lowercase
          var nameB = b.toUpperCase(); // ignore upper and lowercase
          if (nameA < nameB) {
            return -1;
          }
          if (nameA > nameB) {
            return 1;
          }
          return 0;
        });
        this.pieData.sort(function (a, b) {
          var nameA = a.name.toUpperCase(); // ignore upper and lowercase
          var nameB = b.name.toUpperCase(); // ignore upper and lowercase
          if (nameA < nameB) {
            return -1;
          }
          if (nameA > nameB) {
            return 1;
          }
          return 0;
        });
        this.pieOptions.series[0].data = this.pieData;
        this.pieOptions.legend.data = this.pielegend;
        console.log('181pieOptions',this.pieOptions);
        this.drawPie();

        // this.barOptions.legend = [];
        // this.barOptions.series[0] = {
        //   name: "报验数量",
        //   type: "bar",
        //   stack: "total",
        //   barWidth: 12,
        //   data: res.data.data.acceptanceAllCount,
        // };
        // this.barOptions.series[1] = {
        //   name: "通过数量",
        //   type: "bar",
        //   stack: "total",
        //   barWidth: 12, //柱图宽度
        //   data: res.data.data.acceptanceOverCount,
        // };
        this.barOptions.xAxis.data = res.data.data.titleList;
        this.barOptions.dataset.source =  res.data.data.resultList;
        // console.log('this.barOptions',this.barOptions)
        this.drawBar();
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.qualityManage {
  width: 100%;
  height: 100%;
  background-color: red;
  color: #fff;
}
.body {
  .titleBox {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #5d96ed;
    position: relative;
    .titlebg {
      height: 60px;
      position: absolute;
    }
    .title {
      position: absolute;
      z-index: 1;
      top: 16px;
      left: 60px;
    }
  }
  .main {
    width: 100%;
    height: calc(100% - 62px);
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    .myChart:nth-child(1) {
      width: 36%;
    }
    .myChart:nth-child(2) {
      width: 64%;
    }
    .myChart {
      height: 100%;
      color: #fff;
    }
  }
}
</style>
